import styled from "styled-components";
import { ReactNode } from "react";
import { useMount, useSafeState } from "ahooks";
import events from "@/ui/events";
import { clsx } from "clsx";

const Wrapper = styled.div<{ $sidebarCollapsed?: boolean }>`
  display: flex;
  align-items: stretch;
  width: 100vw;
  height: 100vh;
  position: relative;

  > div {
    position: relative;
    height: 100%;
    flex-shrink: 0;
  }

  .area-a {
    &.expanded {
      width: 256px;
    }

    &.collapsed {
      width: 48px;
    }
  }

  .area-b {
    width: 300px;
    overflow: auto;
    border-right: 1px solid hsl(var(--border));
  }

  .area-c {
    width: calc(
      100% - 300px - 300px -
        ${(props) => (props.$sidebarCollapsed ? 48 : 256)}px
    );
    transition: 200ms;
    overflow: auto;
  }

  .area-d {
    border-left: 1px solid hsl(var(--border));
    width: 300px;
    overflow: auto;
  }
`;

export function XHSAppLayout(props: {
  areaA?: ReactNode;
  areaB?: ReactNode;
  areaC?: ReactNode;
  areaD?: ReactNode;
}) {
  const [sidebarCollapsed, setSidebarCollapsed] = useSafeState<boolean>(false);

  useMount(() => {
    events.Sidebar.Collapse.Set.on(({ collapse }) => {
      setSidebarCollapsed(collapse);
    });
  });

  return (
    <Wrapper className={"xhs-app-layout"} $sidebarCollapsed={sidebarCollapsed}>
      <div
        className={clsx("area-a", {
          collapsed: sidebarCollapsed,
          expanded: !sidebarCollapsed,
        })}
      >
        {props.areaA}
      </div>
      <div className={"area-b"}>{props.areaB}</div>
      <div className={"area-c"}>{props.areaC}</div>
      <div className={"area-d"}>{props.areaD}</div>
    </Wrapper>
  );
}
